<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Mesto</title>
  </head>
  <body class="page">
    <div class="page__content">
      <header class="header page__section">
        <img
          src="<%=require('./images/logo.svg')%>"
          alt="Логотип проекта место"
          class="logo header__logo"
        />
      </header>
      <main class="content">
        <section class="profile page__section">
          <div class="profile__image"></div>
          <div class="profile__info">
            <h1 class="profile__title"></h1>
            <button class="profile__edit-button" type="button"></button>
            <p class="profile__description"></p>
          </div>
          <button class="profile__add-button" type="button"></button>
        </section>
        <section class="places page__section">
          <ul class="places__list"></ul>
        </section>
      </main>
      <footer class="footer page__section">
        <p class="footer__copyright">© 2021 Mesto Russia</p>
      </footer>
      <div class="popup popup_is-animated popup_type_edit">
        <div class="popup__content">
          <button type="button" class="popup__close"></button>
          <h3 class="popup__title">Редактировать профиль</h3>
          <form class="popup__form" name="edit-profile">
            <div class="popup__input-container">
              <input
                type="text"
                name="name"
                class="popup__input popup__input_type_name"
                placeholder="Имя"
                required
                minlength="2"
                maxlength="40"
                pattern="^[а-яёa-zА-ЯЁA-Z\-\s]+$"
                data-error-message="Разрешены только латинские, кириллические буквы, знаки дефиса и пробелы."
              />
              <span class="popup__input-error name-error"></span>
            </div>
            <div class="popup__input-container">
              <input
                type="text"
                name="description"
                class="popup__input popup__input_type_description"
                placeholder="Занятие"
                required
                minlength="2"
                maxlength="200"
                pattern="^[а-яёa-zА-ЯЁA-Z\-\s]+$"
                data-error-message="Разрешены только латинские, кириллические буквы, знаки дефиса и пробелы."
              />
              <span class="popup__input-error description-error"></span>
            </div>
            <button type="submit" class="button popup__button">
              Сохранить
            </button>
          </form>
        </div>
      </div>
      <div class="popup popup_is-animated popup_type_new-card">
        <div class="popup__content">
          <button type="button" class="popup__close"></button>
          <h3 class="popup__title">Новое место</h3>
          <form class="popup__form" name="new-place">
            <div class="popup__input-container">
              <input
                type="text"
                name="place-name"
                class="popup__input popup__input_type_card-name"
                placeholder="Название"
                required
                minlength="2"
                maxlength="40"
                pattern="^[а-яёa-zА-ЯЁA-Z\-\s]+$"
                data-error-message="Разрешены только латинские, кириллические буквы, знаки дефиса и пробелы."
              />
              <span class="popup__input-error place-name-error"></span>
            </div>
            <div class="popup__input-container">
              <input
                type="url"
                name="link"
                class="popup__input popup__input_type_url"
                placeholder="Ссылка на картинку"
                required
              />
              <span class="popup__input-error link-error"></span>
            </div>
            <button type="submit" class="button popup__button">
              Сохранить
            </button>
          </form>
        </div>
      </div>
      <div class="popup popup_is-animated popup_type_image">
        <div class="popup__content popup__content_content_image">
          <button type="button" class="popup__close"></button>
          <img src="" alt="" class="popup__image" />
          <p class="popup__caption"></p>
        </div>
      </div>
      <div class="popup popup_is-animated popup_type_avatar">
        <div class="popup__content">
          <button type="button" class="popup__close"></button>
          <h3 class="popup__title">Обновить аватар</h3>
          <form class="popup__form" name="edit-avatar">
            <div class="popup__input-container">
              <input
                type="url"
                name="avatar-link"
                class="popup__input popup__input_type_url"
                placeholder="Ссылка на картинку"
                required
              />
              <span class="popup__input-error avatar-link-error"></span>
            </div>
            <button type="submit" class="button popup__button">
              Сохранить
            </button>
          </form>
        </div>
      </div>
    </div>

    <template id="card-template">
      <li class="places__item card">
        <img class="card__image" src="" alt="" />
        <button type="button" class="card__delete-button"></button>
        <div class="card__description">
          <h2 class="card__title"></h2>
          <div class="card__like">
            <button type="button" class="card__like-button"></button>
            <span class="card__like-count"></span>
          </div>
        </div>
      </li>
    </template>
  </body>
</html>
